<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--ie使用edge渲染模式-->
    <meta name="renderer" content="webkit"><!--360渲染模式-->
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=no">
    <title>变更预约上门时间</title>
    <link rel="stylesheet" href="../../css/basic.css">
    <style type="text/css">
        .bespeak-box{
            height: auto;
            width: 90%;
            margin: auto;
            font-size: 0.28rem;
        }
        .bespeak-box ul li{
            position: relative;
            height: 1.2rem;
            width: 100%;
            border-bottom: 1px solid #e3e3e3;
        }
        .bespeak-font{
            height: auto !important;
            padding: 0.4rem 0 0 0;
            line-height: 0.5rem;
        }
        .li-type {
            line-height: 1.6rem;
            display: block;
            font-size: 0.28rem;
            height: 100%;
            width: 30%;
            left: 0;
        }
        .phone {
            border-radius: 0.1rem;
            font-size: 0.25rem;
            outline: none;
            background-color: #F23A38;
            color: white;
            width: 25%;
            position: absolute;
            right: 0;
            bottom: 0.2rem;
            height: 0.5rem;
            border: none;
        }
        .bespeak-font,.bespeak-prompt{
            color: #666;border-bottom: none !important;}
        .bespeak-prompt{
            padding: 0.4rem 0;
            line-height: 0.5rem;
        }
        .input-area {
            background-color: transparent;
            font-size: 0.28rem;
            width: 70%;
            position: absolute;
            right: 0;
            bottom: 0.15rem;
            height: 0.5rem;
            /* padding-left: 6%; */
            outline: none;
            color: #666;
        }
        .data-btn,.hour-btn {
            width: 56%;
            background-image: url(../../../master/img/bottomIcon.jpg);
            background-repeat: no-repeat;
            background-position: 3.5rem center;
            background-size: 0.2rem;
        }
        .bespeak-btn-area{
            width: 50%;
            margin: 1rem auto;
            height: 0.8rem;
            line-height: 0.8rem;
            font-size: 0.28rem;
        }
        .bespeak-btn{
            height: 100%;
            width: 100%;
            background-color: #F23A38;
            border-radius: 10px;
            outline: none;
            color: white;
            font-size: 0.28rem;
        }
        .dataList{
            color: #F23A38;
            line-height: 0.5rem;
            width: 65%;
        }
        .dataList span{margin: 0 0.1rem}
        .old-bespeak{border-bottom: none !important;}
    </style>
    <script src="../../lib/basicSize.js"></script>
</head>
<body>
<!--导航-->
<div class="top-nav-area">
    <ul>
        <a class="back-a" href="javascript:history.back(-1)"></a>
        <li>变更预约上门时间</li>
    </ul>
</div>
<!--主体-->
<div class="main-body-area">
    <div class="bespeak-box">
        <ul>
            <li>
                <span class="li-type">客户电话</span>
                <input class="input-area" readonly type="text" value="15102612546">
                <button class="phone">打电话</button>
            </li>
            <li class="bespeak-font">
                <div>变更预约上门时间务必跟客户沟通确定，若未与客户确认沟通，擅自变更上门时间，
                    一旦发生纠纷，平台将进行违规处罚。</div>
                <div>（仅支持一次变更）</div>
            </li>
            <li class="old-bespeak">
                <span class="li-type">上次预约时间</span>
                <span class="input-area dataList">
                    <span>2017.12.12</span>
                    <span>12:30-14:30</span>
                </span>
            </li>
            <li class="change-time">
                <span class="li-type">请选择日期</span>
                <input class="input-area data-btn" readonly type="text" value="9.20 周四">
            </li>
            <li class="change-time">
                <span class="li-type">请选择时间</span>
                <input class="input-area hour-btn" readonly type="text" value="08:20-10:20">
            </li>
            <li class="bespeak-prompt">
                <div>温馨提示：确认预约客户后系统将自动发送通知短信给客户，里面包含订单的服务
                    完工确认码。</div>
                <div>如有疑问请联系客服：400-4000-4000</div>
            </li>
        </ul>
    </div>
    <div class="bespeak-btn-area">
        <button class="bespeak-btn">确认</button>
    </div>
</div>
</body>
</html>